<template>
  <div style="padding:0px 8px">
    <el-card class="configContainer" shadow="always">
      <div style="display: flex;flex-direction: row;align-items: center">
        <h4 class="card-title"> 所有项目 </h4>
        <div class="space"/>
        <el-button type="primary" @click="showAdd">新增项目</el-button>
      </div>
      <el-divider/>

      <div style="margin: 8px">
        <div class="demo-form-inline">
          <el-input clearable v-model="searchForm.name" placeholder="项目名" style="width:200px;margin-right: 16px;"/>

          <el-select clearable v-model="searchForm.type" placeholder="类型" style="width:200px;margin-right: 16px;">
            <el-option label="必考" :value="1"/>
            <el-option label="6选2" :value="2"/>
            <el-option label="8选2" :value="3"/>
            <el-option label="体质健康对应" :value="4"/>
          </el-select>
          <el-button type="primary" @click="load">
            <el-icon>
              <Search/>
            </el-icon>
            搜索
          </el-button>
          <el-button @click="reset()">重置</el-button>
          <el-drawer style="position:absolute;"
                     :title="searchFormDtl.subName"
                     v-model="drawer"
                     direction="rtl"
                     size="70%"
                     :before-close="handleClose">
            <el-input clearable style="width:200px;margin-right: 16px;" placeholder="小项名" suffix-icon="el-icon-search"
                      v-model="searchFormDtl.name"></el-input>
            <el-select clearable v-model="searchFormDtl.sextype" placeholder="性别"
                       style="width:200px;margin-right: 16px;">
              <el-option label="男" :value="1"/>
              <el-option label="女" :value="2"/>
              <el-option label="通用" :value="0"/>
            </el-select>
            <el-button class="ml-5" type="primary" @click="loadDtl">搜索</el-button>
            <el-button type="warning" @click="resetDtl">重置</el-button>
            <el-button type="success" @click="addShowDtl = true; this.addDtl = {}">新增</el-button>
            <el-table height="400px" :header-cell-style="{background:'#f8f8f8',height:'40px',color:'#2b2b2b'}"
                      :data="itemList"
                      style="width: 100%;margin-top: 16px;"
                      @selection-change="handleSelectionChange">
              <el-table-column fixed prop="id" label="id" width="50">
              </el-table-column>
              <el-table-column fixed prop="name" label="项目名">
              </el-table-column>
              <el-table-column fixed prop="itemNo" label="小项序号">
              </el-table-column>
              <el-table-column fixed prop="scoreType" label="项目规则标识" width="150">
                <template #default="scope">
                  <el-tag v-if="scope.row.scoreType == 1" type="success">越大越好</el-tag>
                  <el-tag v-else-if="scope.row.scoreType == 2">越小越好</el-tag>
                  <el-tag v-else-if="scope.row.scoreType == 3">等级制</el-tag>
                  <el-tag v-else-if="scope.row.scoreType == 4">扣分制</el-tag>
                  <el-tag v-else-if="scope.row.scoreType == 5">打分制</el-tag>
                  <el-tag v-else="" type="warning">未知</el-tag>
                </template>
              </el-table-column>

              <el-table-column fixed prop="sextype" label="性别">
                <template #default="scope">
                  <el-tag v-if="scope.row.sextype == 1" type="success">男</el-tag>
                  <el-tag v-else-if="scope.row.sextype == 2">女</el-tag>
                  <el-tag v-else-if="scope.row.sextype == 0">通用</el-tag>
                  <el-tag v-else="" type="warning">未知</el-tag>
                </template>
              </el-table-column>
              <el-table-column fixed prop="maxScore" label="最高分数">
              </el-table-column>
              <el-table-column fixed prop="minScore" label="最低分数">
              </el-table-column>
              <el-table-column fixed prop="unit" label="单位">
              </el-table-column>
              <el-table-column fixed prop="createTime" label="创建时间">
              </el-table-column>
              <el-table-column fixed prop="updateTime" label="更新时间">
              </el-table-column>


              <el-table-column fixed label="操作">
                <template #default="scope">
                  <el-button link style="margin-left: 12px" type="primary" size="small" @click="showEditDtl(scope.row)">
                    <el-icon>
                      <Edit/>
                    </el-icon>
                    编辑
                  </el-button>
                  <el-popconfirm title="确认删除吗?" @confirm="delItem(scope.row.id)">
                    <template #reference>
                      <el-button link type="danger" size="small">
                        <el-icon>
                          <Delete/>
                        </el-icon>
                        删除
                      </el-button>
                    </template>
                  </el-popconfirm>

                </template>
              </el-table-column>
            </el-table>
            <div style="padding: 10px 10px">
              <el-pagination
                  :page-sizes="[10, 20, 50, 100]"
                  :page-count="pagecountDtl"
                  :total="totalDtl"
                  @size-change="handleSizeChangeDtl"
                  @current-change="currentChangeDtl"
                  style="margin-top: 16px;width: 100%;display: flex;align-items: center;justify-content: center;"
                  background layout="total, sizes, prev, pager, next, jumper"/>
            </div>
            <el-dialog append-to-body title="添加子项目" v-model="addShowDtl" width="30%" @close='addShowDtl = false'>
              <el-form label-width="100px" size="small" :model="addDtl" :rules="addItemRules" ref="addDtl">
                <el-form-item label="子项目名称" prop="name">
                  <el-input v-model="addDtl.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item prop="scoreType" label-width="100px" label="项目规则标识">
                  <el-select v-model="addDtl.scoreType" placeholder="项目规则标识" style="width:100%">
                    <el-option label="越大越好" :value="1"></el-option>
                    <el-option label="越小越好" :value="2"></el-option>
                    <el-option label="等级制" :value="3"></el-option>
                    <el-option label="扣分制" :value="4"></el-option>
                    <el-option label="打分制" :value="5"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="itemNo" label-width="100px" label="序号">
                  <el-input type="number" v-model="addDtl.itemNo"></el-input>
                </el-form-item>

                <el-form-item prop="sextype" label-width="100px"  label="性别">
                  <el-select clearable v-model="addDtl.sextype" placeholder="性别"
                             style="width:100%">
                    <el-option label="男" :value="1"/>
                    <el-option label="女" :value="2"/>
                    <el-option label="通用" :value="0"/>
                  </el-select>
                </el-form-item>
                <el-form-item label-width="100px" label="最低分数">
                  <el-input type="number" v-model="addDtl.minSocre"></el-input>
                </el-form-item>
                <el-form-item label-width="100px" label="最高分数">
                  <el-input type="number" v-model="addDtl.maxScore"></el-input>
                </el-form-item>
                <el-form-item label-width="100px" label="单位">
                  <el-input  v-model="addDtl.unit"></el-input>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                <el-button @click="addShowDtl = false">取消</el-button>
                <el-button type="primary" @click="addItem()">确定</el-button>
                 </span>
              </template>
            </el-dialog>

            <el-dialog append-to-body title="更改子项目" v-model="dtlShow" width="30%" @close='dtlShow = false'>
              <el-form ref="editDtl" label-width="100px" size="small" :model="editDtl" :rules="editItemRules" >
                <el-form-item label="子项目名称" prop="name">
                  <el-input v-model="editDtl.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item prop="scoreType" label-width="100px" label="项目规则标识">
                  <el-select v-model="editDtl.scoreType" placeholder="项目规则标识" style="width:100%">
                    <el-option label="越大越好" :value="1"></el-option>
                    <el-option label="越小越好" :value="2"></el-option>
                    <el-option label="等级制" :value="3"></el-option>
                    <el-option label="扣分制" :value="4"></el-option>
                    <el-option label="打分制" :value="5"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item prop="itemNo" label-width="100px" label="序号">
                  <el-input  v-model="editDtl.itemNo"></el-input >
                </el-form-item>

                <el-form-item prop="sextype" label-width="100px"  label="性别">
                  <el-select clearable v-model="editDtl.sextype" placeholder="性别"
                             style="width:100%">
                    <el-option label="男" :value="1"/>
                    <el-option label="女" :value="2"/>
                    <el-option label="通用" :value="0"/>
                  </el-select>
                </el-form-item>
                <el-form-item label-width="100px"  label="最低分数">
                  <el-input type="number" v-model="editDtl.minSocre"></el-input>
                </el-form-item>
                <el-form-item label-width="100px"  label="最高分数">
                  <el-input type="number" v-model="editDtl.maxScore"></el-input>
                </el-form-item>
                <el-form-item label-width="100px"  label="单位">
                  <el-input  v-model="editDtl.unit"></el-input>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                <el-button @click="dtlShow = false">取消</el-button>
                <el-button type="primary" @click="editItem()">确定</el-button>
                 </span>
              </template>
            </el-dialog>
          </el-drawer>
        </div>
        <el-table height="400px" :header-cell-style="{background:'#f8f8f8',height:'40px',color:'#2b2b2b'}"
                  :data="subList"
                  style="width: 100%;margin-top: 16px;"
                  @selection-change="handleSelectionChange">
          <el-table-column fixed prop="id" label="id" width="50">
          </el-table-column>
          <el-table-column fixed prop="name" label="项目名">
          </el-table-column>
          <el-table-column fixed prop="type" label="类型">
            <template #default="scope">
              <!--              1.必修 2.6选2 3.8选2 4.健康监测-->
              <el-tag v-if="scope.row.type == 1" type="warning">必考项目</el-tag>
              <el-tag v-else-if="scope.row.type == 2" type="success">6选2项目</el-tag>
              <el-tag v-else-if="scope.row.type == 3" type="danger">8选2项目</el-tag>
              <el-tag v-else-if="scope.row.type == 4" type="primary">健康监测</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed prop="year" label="年级" width="150">
            <template #default="scope">
              <el-tag v-if="scope.row.year == 1" type="success">七年级</el-tag>
              <el-tag v-else-if="scope.row.year == 2" type="primary">八年级</el-tag>
              <el-tag v-else-if="scope.row.year == 3" type="danger">九年级</el-tag>
              <el-tag v-else="" type="warning">未知</el-tag>
            </template>
          </el-table-column>

          <el-table-column fixed prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column fixed prop="updateTime" label="更新时间">
          </el-table-column>


          <el-table-column fixed width="120px" label="操作">
            <template #default="scope">
              <el-button link style="margin-left: 12px" type="info" size="small" @click="showDtl(scope.row)">
                <el-icon>
                  <View/>
                </el-icon>
                查看
              </el-button>
              <el-button link type="primary" size="small" @click="showEdit(scope.row)">
                <el-icon>
                  <Edit/>
                </el-icon>
                编辑
              </el-button>
              <el-popconfirm title="确认删除吗?" @confirm="del(scope.row.id)">
                <template #reference>
                  <el-button link type="danger" size="small">
                    <el-icon>
                      <Delete/>
                    </el-icon>
                    删除
                  </el-button>
                </template>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          :page-count="pagecount"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="currentChange"
          style="margin-top: 16px;width: 100%;display: flex;align-items: center;justify-content: center;"
          background layout="total, sizes, prev, pager, next, jumper"/>
    </el-card>
  </div>
  <el-dialog v-model="show" title="新增项目" center>
    <el-form ref="add" :model="add" :rules="addRules">
      <el-form-item prop="name" label="项目名" label-width="100px">
        <el-input v-model="add.name"  placeholder="请输入项目名"></el-input>
      </el-form-item>
      <el-form-item prop="type" label="类型" label-width="100px">
        <el-select v-model="add.type" placeholder="项目类型" style="width:100%">
          <el-option label="6选2项目" :value="2"></el-option>
          <el-option label="8选2项目" :value="3"></el-option>
          <el-option label="健康监测" :value="4"></el-option>
          <el-option label="必考项目" :value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="year" label="所属年级" label-width="100px">
        <el-select v-model="add.year" placeholder="所属年级" style="width:100%">
          <el-option label="七年级" :value="1"/>
          <el-option label="八年级" :value="2"/>
          <el-option label="九年级" :value="3"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="addSub()">确定</el-button>
            </span>
    </template>
  </el-dialog>
  <el-dialog v-model="show_edit" title="更新项目" center>
    <el-form ref="edit" :model="edit" :rules="editRules">
      <el-form-item prop="name" label="项目名" label-width="100px">
        <el-input v-model="edit.name" placeholder="请输入项目名"></el-input>
      </el-form-item>
      <el-form-item prop="type" label="类型" label-width="100px">
        <el-select v-model="edit.type" placeholder="项目类型" style="width:100%">
          <el-option label="6选2项目" :value="2"></el-option>
          <el-option label="8选2项目" :value="3"></el-option>
          <el-option label="健康监测" :value="4"></el-option>
          <el-option label="必考项目" :value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="year" label="所属年级" label-width="100px">
        <el-select v-model="edit.year" placeholder="所属年级" style="width:100%">
          <el-option label="七年级" :value="1"/>
          <el-option label="八年级" :value="2"/>
          <el-option label="九年级" :value="3"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="show_edit = false">取消</el-button>
                <el-button type="primary" @click="editSub()">确定</el-button>
            </span>
    </template>
  </el-dialog>
  <CompanyText/>
</template>

<script>
import CompanyText from "../../../components/CompanyText.vue";

export default {

  name: "subjectManagerPage",
  props: {
    // msg: String
  },
  components: {
    CompanyText
  },
  data() {
    return {
      totalDtl: 10,
      pagecountDtl: 10,
      searchForm: {},
      searchFormDtl: {},
      addRules: {
        year: [{required: true, message: "年级必选", trigger: ['change'], type: 'number'},],
        type: [{required: true, message: "类型必选", trigger: ['change'], type: 'number'},],
        name: [{required: true, message: "项目名必填", tirgger: blur},],
      },
      editRules: {
        year: [{required: true, message: "年级必选", trigger: ['change'], type: 'number'},],
        type: [{required: true, message: "类型必选", trigger: ['change'], type: 'number'},],
        name: [{required: true, message: "项目名必填", tirgger: blur},],
      },
      addItemRules: {
        year: [{required: true, message: "年级必选", trigger: ['change'], type: 'number'},],
        type: [{required: true, message: "类型必选", trigger: ['change'], type: 'number'},],
        scoreType: [{required: true, message: "项目规则必选", trigger: ['change'], type: 'number'},],
        sextype: [{required: true, message: "性别必选", trigger: ['change'], type: 'number'},],
        itemNo: [{required: true, message: "序号必填", tirgger: blur},],
        name: [{required: true, message: "项目名必填", tirgger: blur},],
      },
      editItemRules: {
        year: [{required: true, message: "年级必选", trigger: ['change'], type: 'number'},],
        type: [{required: true, message: "类型必选", trigger: ['change'], type: 'number'},],
        scoreType: [{required: true, message: "项目规则必选", trigger: ['change'], type: 'number'},],
        sextype: [{required: true, message: "性别必选", trigger: ['change'], type: 'number'},],
        itemNo: [{required: true, message: "序号必填", tirgger: blur},],
        name: [{required: true, message: "项目名必填", tirgger: blur},],
      },
      type: null,
      dtlShow: false,
      addDtl: {},
      editDtl: {},
      addShowDtl: false,
      add: {},
      edit: {},
      itemName: null,
      year: null,
      itemList: [],
      drawer: false,
      uploadDialogVisible: false,
      subId: null,
      subList: [],
      show: false,
      show_edit: false
    }
  },
  created() {
    this.load();
  },
  methods: {
    addItem() {
      let that = this;
      that.addDtl.subId = that.searchFormDtl.subId;
      this.$refs.addDtl.validate((valid, fields) => {
        if (valid) {
          this.$http.post('/subItem/add', that.addDtl).then(function (response) {
            console.log('success' + response.data);
            if (response.code === 0) {
              console.log('success');
              that.$message.success(response.userMsg)
              that.addShowDtl = false;
              that.loadDtl()
              that.$refs.addDtl.resetFields();
            }
          }).catch(function (error) {
            console.log('error');
          });
        }
      })
    },
    editItem() {
      let that = this;
      this.$refs.editDtl.validate((valid, fields) => {
        if (valid) {
          this.$http.post('/subItem/edit', that.editDtl).then(function (response) {
            console.log('success' + response.data);
            if (response.code === 0) {
              console.log('success');
              that.$message.success(response.userMsg)
              that.dtlShow = false;
              that.loadDtl()
              that.$refs.editDtl.resetFields();
            }
          }).catch(function (error) {
            console.log('error');
          });
        }
      })
    },
    showEditDtl(item) {
      console.info(item)
      Object.assign(this.editDtl,item)
      console.info(this.editDtl)
      this.dtlShow = true
    },
    loadDtl() {
      let that = this;
      this.$http.post('/subItem/page', this.searchFormDtl).then(function (response) {
        console.log('success' + response);
        that.itemList = response.data.records;
        that.pagecountDtl = response.data.pages;
        that.currentDtl = response.data.current;
        that.totalDtl = response.data.total;
      }).catch(function (error) {
        console.log('error');
      });
    },
    showEdit(item) {
      Object.assign(this.edit,item);
      this.show_edit = true;
    },
    showDtl(item) {
      console.info(item)
      this.searchFormDtl.subName = item.name;
      this.searchFormDtl.subId = item.id;
      this.drawer = true;
      this.loadDtl()
    },
    handleClose() {
      this.drawer = false;
    },
    showAdd() {
      this.add = {};
      this.show = true;
    },
    reset() {
      this.searchForm = {};
      this.load();
    },
    resetDtl() {
      this.searchFormDtl = {subId : this.searchFormDtl.subId}
      this.loadDtl();
    },
    load() {
      let that = this;
      this.$http.post('/subject/page', that.searchForm).then(function (response) {
        console.log('success' + response);
        that.subList = response.data.records;
        that.pagecount = response.data.pages;
        that.total = response.data.total;
        that.current = response.data.current;
      }).catch(function (error) {
        console.log('error');
      });
    },
    addSub() {
      let that = this;
      this.$refs.add.validate((valid, fields) => {
        if (valid) {
          this.$http.post('/subject/add', that.add).then(function (response) {
            console.log('success' + response.data);
            if (response.code === 0) {
              console.log('success');
              that.$message.success(response.userMsg)
              that.show = false;
              that.load()
              that.$refs.add.resetFields();
            }
          }).catch(function (error) {
            console.log('error');
          });
        }
      })
    },
    delItem(id) {
      let that = this;
      this.$http.post('/subItem/del', {
        "id": id,
      }).then(function (response) {
        console.log('success' + response.data);
        if (response.code === 0) {
          console.log('success');
          that.$message.success(response.userMsg)
          that.loadDtl()
        }
      }).catch(function (error) {
        console.log('error');
      });
    },
    del(id) {
      let that = this;
      this.$http.post('/subject/del', {
        "id": id,
      }).then(function (response) {
        console.log('success' + response.data);
        if (response.code === 0) {
          console.log('success');
          that.$message.success(response.userMsg)
          that.load()
        }
      }).catch(function (error) {
        console.log('error');
      });
    },
    editSub() {
      let that = this;
      console.info(this.edit)
      this.$refs.edit.validate((valid, fields) => {
        if (valid) {
          this.$http.post('/subject/edit', this.edit).then(function (response) {
            console.log('success' + response.data);
            if (response.code === 0) {
              console.log('success');
              that.$message.success(response.userMsg)
              that.show_edit = false;
              that.load()
              that.$refs.edit.resetFields();
            }
          }).catch(function (error) {
            console.log('error');
          });
        }
      })
    },
    currentChange(current) {
      this.searchForm.current = current;
      console.info(this.current)
      this.load();
    },
    handleSizeChange(size) {
      this.searchForm.size = size;
      console.info(this.size)
      this.load();
    },
    currentChangeDtl(current) {
      this.searchFormDtl.current = current;
      console.info(this.current)
      this.loadDtl();
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    handleSizeChangeDtl(size) {
      this.searchFormDtl.size = size;
      this.loadDtl();
    },
  },
}
</script>

<style scoped>
.configContainer {
  margin: 10px 8px;
  padding: 0px;
  /* border: red 1px solid; */
}
</style>
